<template>
    <div>
        <template v-for="item in this.menuList">
            <el-submenu
                :disabled="item.disabled"
                :index="item.id + ''"
                v-if="item.children.length > 0"
                :key="item.id + ''"
            >
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.menuName }}</span>
                </template>
                <Leftmenu :menuList="item.children"></Leftmenu>
            </el-submenu>
            <el-menu-item
                v-else
                :disabled="item.disabled"
                :index="item.url + ''"
                :route="item.url"
                @click="savePath(item.url)"
                :key="item.id + ''"
                style="padding-left: 50px"
            >
                <i :class="item.icon"></i>
                <span>{{ item.menuName }}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
export default {
    name: "Leftmenu",

    data() {
        return {};
    },
    props: {
        // isActive: {
        //     type: Boolean,
        //     default: false,
        // },
        menuList: {
            type: Array,
            default: [],
        },
    },

    mounted() {},

    methods: {
        // 路由跳转
        dealNavLick(url) {
            this.$router.push(url);
        },

        // 保存路由
        savePath() {},
        // handleOpen(key, keyPath) {
        //     console.log(key, keyPath);
        // },
        // handleClose(key, keyPath) {
        //     console.log(key, keyPath);
        // },
    },
};
</script>

<style lang="less" scoped>
.el-menu--collapse span,
.el-menu--collapse i.el-submenu__icon-arrow {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
}
</style>
